<!--
 * @Author: your name
 * @Date: 2021-04-07 17:00:47
 * @LastEditTime: 2021-05-21 17:32:25
 * @LastEditors: Please set LastEditors
 * @Description: 临床数据统计
 * @FilePath: /medicine-web/src/views/document/statitics/index.vue
-->
<template>
  <div class="document-statitics-container">
    <p class="font-pattern-8">数据统计</p>
    <!-- <customDateRanger @selectTimeRange="timeRange"></customDateRanger> -->
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__one'" :chartTitle="'肿瘤类型年化对比'" :chartData="chartData1"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__two'" :chartTitle="'溶瘤病毒类型年化对比'" :chartData="chartData2"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col style="width: 59%">
        <pieChart :elementId="'pie-chart__one'" :chartTitle="'溶瘤病毒/肿瘤类型统计'" :outterData="outterData" :innerData="innerData"></pieChart>
      </a-col>
      <a-col style="width: 39%">
        <lineShadowChart :elementId="'line-chart__three'" :chartTitle="'招募状态'" :chartData="chartData4"></lineShadowChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col style="width: 39%">
        <barChart3 :elementId="'bar-chart__three'" :chartTitle="'临床阶段'" :chartData="chartData8"></barChart3>
      </a-col>
      <a-col style="width: 59%">
        <pieChart2 :elementId="'pie-chart__two'" :chartTitle="'联合疗法'" :chartData="chartData6"></pieChart2>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col :span="24">
        <lineChart1 :elementId="'line-chart__four'" :chartTitle="'给药方式'" :chartData="chartData3"></lineChart1>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import customDateRanger from '@/components/CustomDateRanger/index'
import lineChart from '@/components/Charts/LineChart'
import lineChart1 from '@/components/Charts/LineChart1.vue'
import pieChart from '@/components/Charts/PieChart'
import pieChart2 from '@/components/Charts/PieChart2'
import lineShadowChart from '@/components/Charts/LineShadowChart'
import barChart from '@/components/Charts/BarChart'
import barChart2 from '@/components/Charts/BarChart2'
import barChart3 from '@/components/Charts/BarChart3'
export default {
  name: 'clinStatitics',
  components: { customDateRanger, lineChart, lineChart1, pieChart, pieChart2, lineShadowChart, barChart, barChart2, barChart3 },
  data () {
    return {
      chartData1: [],
      chartData2: [],
      chartData3: [],
      outterData: [],
      innerData: [],
      chartData4: [],
      chartData6: [],
      chartData8: []
    }
  },
  methods: {
    timeRange (dateString) {
      console.log('timeRange===========', dateString)
    },
    async fetchData () {
      const res = await this.$action('getClinicalStatitics')
      console.log('getClinicalStatitics===========', res)
      // 瘤种类型
      if (res.tumor_type_year_data && res.tumor_type_year_data.length > 0) {
        // years 有且仅有长度为3
        const years = Array.from(new Set(res.tumor_type_year_data.map(item => item.year)))
        this.chartData1 = res.tumor_type_year_data.map(item => {
          if (years.indexOf(item.year) == 0) {
            return {
              color: '#6495F9',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else if (years.indexOf(item.year) == 1) {
            return {
              color: '#62DAAA',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else {
            return {
              color: '#5F7293',
              year: item.year,
              data: item.data,
              type: item.type
            }
          }
        })
      }
      // 溶瘤病毒类型
      if (res.virus_type_year_data && res.virus_type_year_data.length > 0) {
        // years 有且仅有长度为3
        const years = Array.from(new Set(res.virus_type_year_data.map(item => item.year)))
        this.chartData2 = res.virus_type_year_data.map(item => {
          if (years.indexOf(item.year) == 0) {
            return {
              color: '#6495F9',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else if (years.indexOf(item.year) == 1) {
            return {
              color: '#62DAAA',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else {
            return {
              color: '#5F7293',
              year: item.year,
              data: item.data,
              type: item.type
            }
          }
        })
      }
      // 给药方式
      this.chartData3 = res.inject_mode_data ? res.inject_mode_data : []
      console.log('this.chartData3', this.chartData3)
      // 溶瘤病毒/肿瘤类型统计
      const virus_type_data_dict = {
        '重组人5型腺病毒': '#76C3FE',
        'T-VEC': '#B8E0FF',
        'T3011': '#D8EEFF',
        'Pexa-Vec': '#F7D266',
        'Reolysin': '#FAE2A0',
        'DNX-2401': '#FBECC0',
        'Pelareprep': '#FDF3DA',
        'HF10': '#F2858C',
        'Onys-015': '#F6B2B5',
        '其他': '#F9D2D5'
      }
      if (res.virus_type_data && res.virus_type_data.length > 0) {
        this.innerData = res.virus_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: virus_type_data_dict[item.name] }
          }
        })
      }
      const tumor_type_data_dict = {
        '肝癌': '#76C3FE',
        '恶性胸腹水': '#B8E0FF',
        '头颈部癌': '#D8EEFF',
        '黑色素瘤': '#F7D266',
        '胰腺癌': '#FAE2A0',
        '肺癌': '#FDF3DA',
        '宫颈癌': '#F2858C',
        '胶质癌': '#F6B2B5',
        '其他': '#F9D2D5'
      }
      if (res.tumor_type_data && res.tumor_type_data.length > 0) {
        this.outterData = res.tumor_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: tumor_type_data_dict[item.name] }
          }
        })
      }
      // 招募状态
      this.chartData4 = res.recruit_data ? res.recruit_data : []
      // 联合疗法
      let temp = res.cure_method_data ? res.cure_method_data : []
      for (let item of temp) {
        if (item.name == '单药') {
          item.itemStyle = { color: '#76C3FE' }
        } else if (item.name == '联合免疫') {
          item.itemStyle = { color: '#B8E0FF' }
        } else if (item.name == '联合化疗') {
          item.itemStyle = { color: '#D8EEFF' }
        } else if (item.name == '联合放疗') {
          item.itemStyle = { color: '#F7D266' }
        } else if (item.name == '联合靶向') {
          item.itemStyle = { color: '#FAE2A0' }
        } else if (item.name == '其他') {
          item.itemStyle = { color: '#FDF3DA' }
        } else {
          item.itemStyle = { color: '#6DE1F5' }
        }
        this.chartData6.push(item)
      }
      // 临床阶段
      this.chartData8 = res.stage_data ? res.stage_data.reverse() : []
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.document-statitics-container {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 0px 88px 0px;
}
</style>